<template>
  <view class="content">
    <hnav title="首页"></hnav>

    <!-- 轮播 -->
    <uni-swiper-dot
      :info="lblist"
      :current="current"
      field="content"
      :mode="mode"
    >
      <swiper
        class="swiper-box"
        @change="change"
        :autoplay="true"
        :interval="interval"
        circular
      >
        <swiper-item v-for="(item, index) in lblist" :key="index">
          <view class="swiper-item"> <img :src="item.imgSrc" alt="" /> </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 租房小组 -->
    <div class="title"><h4>租房小组</h4></div>
    <uni-grid :column="2" :show-border="false" :square="false">
      <uni-grid-item
        v-for="(item, index) in grouplist"
        :index="index"
        :key="index"
      >
        <view class="grid-item-box">
          <image class="image" :src="item.imgSrc" />
          <text class="text">{{ item.title }}</text>
          <text class="text">{{ item.desc }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>

    <!-- 新闻资讯 -->
    <div class="title"><h4>新闻资讯</h4></div>

    <uni-swiper-dot
      :info="newsform"
      :current="current"
      field="content"
      :mode="mode"
    >
      <swiper
        class="swiper-box"
        @change="change"
        :autoplay="true"
        :interval="interval"
        circular
      >
        <swiper-item v-for="(item, index) in newsform" :key="index">
          <view class="swiper-item"> <img :src="item.imgSrc" alt="" /> </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <uni-section type="line">
      <uni-card
        v-for="(v, k) in newsform"
        :key="k"
        :title="v.title"
        :thumbnail="v.imgSrc"
      >
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lblist: [], //轮播列表
      current: 0, //轮播下标
      mode: "round", //轮播行为
      interval: "2000", //轮播时间
      grouplist: [], //租房小组列表
      newsform: [], //新闻资讯列表
    };
  },
  onLoad() {},
  methods: {
    async getswiper() {
      //获取轮播数据
      let res = await this.$api.getSwiper();
      console.log(res);
      if (res.data.code == 200) {
        this.lblist = res.data.msg;
        console.log(this.lblist);
      }
    },
    async getgroup() {
      //获取租房小组数据
      let res = await this.$api.getGroup();
      console.log(res);
      if (res.data.code == 200) {
        this.grouplist = res.data.msg;
        console.log(this.grouplist);
      }
    },
    async getnews() {
      //获取新闻资讯
      let res = await this.$api.getNews();
      console.log(res);
      if (res.data.code == 200) {
        this.newsform = res.data.msg;
        console.log(this.newsform);
      }
    },

    change(e) {
      //轮播图点击事件
      this.current = e.detail.current;
    },
  },
  mounted() {
    this.getswiper();
    this.getgroup();
    this.getnews();
  },
};
</script>

<style scoped>
.swiper-box {
  height: 200px;
  width: 100%;
}
.swiper-item > img {
  height: 200px;
  width: 100%;
}
.title {
  width: 100%;
  height: 50px;
  background-color: gainsboro;
  line-height: 50px;
}
h4 {
  padding-left: 10px;
  font-size: 16px;
}
.text {
  font-weight: 700;
}
.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.image {
  width: 60px;
  height: 60px;
}
</style>
